<template>
  <div>
    <!-- list-type 设置上传文件列表样式
         action 是上传图像的地址, 必写属性, 只要设置了action属性 上传的图像会自动以post的方式向这个地址中传递数据
         file-list="[{url:'xxx'}]" 文件列表, 将数组中对一个的图像url展示在列表中
         on-preview 点击文件列表中的文件触发的这个函数
         limit 限制上传的数量
         on-remove 点击移除文件的触发的钩子
         http-request 覆盖默认上传行为
         on-change 添加文件触发的钩子
         beforeUpload 文件上传前经过的处理函数 类型和大小的校验
    -->
    <el-upload
      :class="{'my_upload': limit <= fileList.length }"
      list-type="picture-card"
      action=""
      :file-list="fileList"
      :on-preview="handelPreview"
      :limit="limit"
      :on-remove="handleRemove"
      :http-request="handleUpload"
      :on-change="handleChange"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 图片预览对话框 -->
    <el-dialog
      title="图片预览"
      :visible="dialogVisible"
      @close="dialogVisible = false"
    >
      <div style="text-align: center">
        <img :src="url" width="100%">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
// 创建腾讯云实例
var cos = new COS({
  SecretId: 'AKIDc4GCrFNFqAF8k6B0YonWy93g27vTkkSt',
  SecretKey: 'C7l8E3cuue7JEtHODl34oGVUBbkcDQM2'
})
export default {
  name: 'ImageUpload',
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      fileList: [
        // { url: 'https://img0.baidu.com/it/u=1792540227,3843761066&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' }
        // { url: 'https://img1.baidu.com/it/u=3407815955,2052996205&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' },
        // { url: 'https://img0.baidu.com/it/u=1321212603,2122841914&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500' }
      ],
      dialogVisible: false, // 控制图片预览的对话框展示的布尔值
      url: '' // 预览图像的地址
      // limit: 5 // 限制上传的数量
    }
  },
  computed: {
    // 返回布尔值的一个计算属性, 判断是否所有的图片的状态都success
    isAllSuccessed() {
      return this.fileList.every(item => item.status === 'success')
    }
  },
  methods: {
    // 点击文件预览
    handelPreview(file) { // file就是被点击的文件对象
      // 1. 展示对话框
      this.dialogVisible = true
      // 2.设置url地址
      this.url = file.url
    },
    // 文件移除时触发的函数
    handleRemove(file, fileList) { // file就是被点击移除的文件对象, fileList是剩余的文件列表
      // console.log(file, fileList)
      // 将剩余的文件列表赋值给data中的fileList
      this.fileList = [...fileList]
    },
    // 添加文件触发的钩子
    handleChange(file, fileList) { // file是新增的文件对象, fileList是新增后的文件列表对象
      // console.log(file, fileList)
      // 将最新的文件列表对象赋值给data中的fileList
      this.fileList = [...fileList]
    },
    // 上传前的校验处理
    beforeUpload(file) {
      // console.log(file) // file是选择上传的文件对象
      // 1. 校验文件类型
      const list = ['image/jpeg', 'image/png', 'image/gif', 'image/jpg', 'image/bmp']
      if (!list.includes(file.type)) {
        this.$message.warning('请上传jpg/png/gif等类型的图片')
        return false
      }
      // 2. 校验文件大小
      if (file.size / 1024 / 1024 > 2) {
        this.$message.warning('请上传2M内的图片')
        return false
      }
    },
    // 上传图像
    handleUpload(obj) { // obj是上传文件所在的一个配置对象, obj.file是上传的文件对象
      console.log(obj.file)
      //  1. 拿着上传的文件对象的uid去data中的fileList中查找那个文件对象
      const imgobj = this.fileList.find(item => item.uid === obj.file.uid)
      // 下午将上传的obj.file上传到腾讯云
      cos.putObject({
        Bucket: 'hrsaas92-1305579172', /* 存储桶的名字 */
        Region: 'ap-shanghai', /* 存储桶所在地域，必须字段 */
        Key: +new Date() + obj.file.name, /* 必须 上传的文件的名字 唯一 */
        StorageClass: 'STANDARD',
        Body: obj.file, // 上传文件对象
        // 上传期间持续触发的函数
        onProgress: (progressData) => { // progressData上传期间的对象
          console.log(this)
          // loaded 已上传 total 总文件大小  speed上传的速度  percent 上传的百分比值
          // 上传期间处理上传的进度条
          // status: ready uploaing (percentage)  success   fail
          // console.log(JSON.stringify(progressData))
          // 1. 拿着上传的文件对象的uid去data中的fileList中查找那个文件对象
          // const imgobj = this.fileList.find(item => item.uid === obj.file.uid)
          // 2. 修改状态为 'uploading'
          imgobj.status = 'uploading'
          // 3. 让进度条动起来
          imgobj.percentage = progressData.percent * 100
          // 4. 如果上传完毕 将对应的状态应该修改为success
          if (progressData.percent === 1) {
            imgobj.status = 'success'
          }
        }
        // 上传完成后触发的函数
      }, (err, data) => { // err是错误对象, data是上传成功的对象 data中Location就是上传到腾讯云返回的图片的真实地址
        console.log(err || data)
        // 5. 上传成功后,将腾讯云返回的地址存储在data的fileList中
        if (!err) {
          imgobj.url = 'https://' + data.Location
        }
      })
      // 模拟 伪代码
      /* const fm = new FormData()
      fm.append('img', obj.file)
      axios({
        method: 'put',
        url: 'www.xxx.com/pic',
        data: fm
      }) */
    }
  }
}
</script>

<style lang="scss" scoped>
.my_upload{
  ::v-deep .el-upload--picture-card{
    display: none;
  }
}

</style>
